import './ScheduleTemp.scss'

import dayjs from 'dayjs'
import { DatePicker } from 'antd'
import { useEffect, useState } from 'react'
import { useMount, useRequest } from 'ahooks'

import { FrontModalBox } from '../Modal'
import { Http } from '../../../../Common/Api'
import { TitleSmall001 } from '../Common/SmallTitle'

import { project } from '../../../../Common/Data'
const { imageUrl } = project[window.location.hostname]

export const ScheduleTempA01 = () => {
    const TopList = [
        { uuid: 1, title: '总投资', value: 'A01', unit: '万', image: 'N_G0101.png', color: 'rgba(194, 255, 235, 1)' },
        { uuid: 2, title: '累计投资', value: 'A02', unit: '万', image: 'N_G0102.png', color: 'rgba(228, 255, 202, 1)' },
        { uuid: 3, title: '本年投资', value: 'A03', unit: '万', image: 'N_G0103.png', color: 'rgba(255, 217, 104, 1)' },
        { uuid: 4, title: '本月投资', value: 'A04', unit: '万', image: 'N_G0104.png', color: 'rgba(255, 184, 110, 1)' },
        { uuid: 5, title: '完成率 ', value: 'A05', unit: '%', image: 'N_G0105.png', color: 'rgba(255, 184, 110, 1)' },
    ]
    const BtmList = [
        [
            { uuid: 1, title: '建安费', value: '建安费总体', color: 'rgba(92, 255, 229, 1)' },
            { uuid: 2, title: '累计完成', value: '建安费累计' },
            { uuid: 3, title: '本年完成', value: '建安费本年' },
            { uuid: 4, title: '本月完成', value: '建安费本月' },
        ],
        [
            { uuid: 1, title: '征地拆迁费', value: '征地拆迁费总体', color: 'rgba(173, 255, 157, 1)' },
            { uuid: 2, title: '累计完成', value: '征地拆迁费累计' },
            { uuid: 3, title: '本年完成', value: '征地拆迁费本年' },
            { uuid: 4, title: '本月完成', value: '征地拆迁费本月' },
        ],
        [
            { uuid: 1, title: '其他费', value: '其他费总体', color: 'rgba(255, 154, 153, 1)' },
            { uuid: 2, title: '累计完成', value: '其他费累计' },
            { uuid: 3, title: '本年完成', value: '其他费本年' },
            { uuid: 4, title: '本月完成', value: '其他费本月' },
        ],
        [
            { uuid: 1, title: '预备费', value: '预备费总体', color: 'rgba(208, 157, 255, 1)' },
            { uuid: 2, title: '累计完成', value: '预备费累计' },
            { uuid: 3, title: '本年完成', value: '预备费本年' },
            { uuid: 4, title: '本月完成', value: '预备费本月' },
        ],
        [
            { uuid: 1, title: '利息', value: '利息总体', color: 'rgba(255, 226, 92, 1)' },
            { uuid: 2, title: '累计完成', value: '利息累计' },
            { uuid: 3, title: '本年完成', value: '利息本年' },
            { uuid: 4, title: '本月完成', value: '利息本月' },
        ],
    ]

    const [TopData, setTopData] = useState({ A01: 0, A02: 0, A03: 0, A04: 0, A05: 0 })
    const [BtmData, setBtmData] = useState({
        建安费总体: 0,
        建安费本年: 0,
        建安费本月: 0,
        建安费累计: 0,
        征地拆迁费总体: 0,
        征地拆迁费本年: 0,
        征地拆迁费本月: 0,
        征地拆迁费累计: 0,
        其他费总体: 0,
        其他费本年: 0,
        其他费本月: 0,
        其他费累计: 0,
        预备费总体: 0,
        预备费本年: 0,
        预备费本月: 0,
        预备费累计: 0,
        利息总体: 0,
        利息本年: 0,
        利息本月: 0,
        利息累计: 0,
    })

    const [Date, setDate] = useState(dayjs())

    const { runAsync: getPro } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { totalAmount, accumulativeAmount, thisYearAmount, thisMonthAmount } = res.list[0]
            setTopData({
                A01: parseInt(totalAmount / 10000),
                A02: parseInt(accumulativeAmount / 10000),
                A03: parseInt(thisYearAmount / 10000),
                A04: parseInt(thisMonthAmount / 10000),
                A05: parseInt((accumulativeAmount / totalAmount) * 10000) / 100,
            })
        },
    })

    const { runAsync: getItem } = useRequest(Http, { manual: true, onSuccess: res => setBtmData(res) })

    useEffect(() => {
        getItem({ url: 'getAccumulativeAmountByInvestListYangPu', data: { date: dayjs(Date).format('YYYY-MM-DD') } })
    }, [Date, getItem])

    useMount(() => {
        getPro({ url: 'getProgressGetTotalInvest', data: { Date: dayjs().format('YYYY-MM') } })
    })

    const [OptionsCall, setOptionsCall] = useState()

    const onClick = () =>
        setOptionsCall({ type: 'TableList', data: { type: 'YPInvestmentDetails', title: '投资统计详情' } })

    return (
        <div className="ScheduleTempA01">
            <div className="top">
                {TopList.map(({ uuid, title, value, unit, image, color }) => (
                    <div key={uuid}>
                        <img src={imageUrl + image} alt="" />
                        <div>
                            <div style={{ color }}>{title}</div>
                            <div>
                                {TopData[value]} <span>{unit}</span>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
            <div className="cen">
                <TitleSmall001 title="投资情况" />
                <DatePicker allowClear={false} suffixIcon={false} value={Date} format="YYYY/MM/DD" onChange={setDate} />
            </div>
            <div className="btm" onClick={onClick}>
                {BtmList.map((item, index) => (
                    <div key={index}>
                        {item.map(({ uuid, title, value, color }) => (
                            <div key={uuid}>
                                <div style={{ color }}>{title}</div>
                                <div>{BtmData[value]} 万</div>
                            </div>
                        ))}
                    </div>
                ))}
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
